<!-- Ana Luisa Figón Treviño -->
<html>
	<head>
		<meta charset='utf-8'>
		<title>The Book List</title>
		<script type="text/javascript">
			function nueva(){
				var books = [
					{title: 'The Design of EveryDay Things',
					 img: 'http://ecx.images-amazon.com/images/I/41j2ODGkJDL._AA115_.jpg',
					 author: 'Don Norman',
					 alreadyRead: false
					},
					{title: 'The Most Human Human',
					 img: 'http://ecx.images-amazon.com/images/I/41Z56GwEv9L._AA115_.jpg',
					 author: 'Brian Christian',
					 alreadyRead: true
					}];

				
				var bookList = document.createElement('ol');
				for (var i = 0; i < books.length; i++) {
					var par = document.createElement('p');

  					var bookItem = document.createElement('li');
  					
  					var bookTitle = document.createTextNode(books[i].title);
  					bookItem.appendChild(bookTitle);

  					var list = document.createElement('ul');
  					
  					var listItem = document.createElement('li');
					var bookImg = document.createElement('img');
					bookImg.src = books[i].img;
					listItem.appendChild(bookImg);
					list.appendChild(listItem);

  					var listItem1 = document.createElement('li');
  					var bookAuthor = document.createTextNode('By ' + books[i].author);
  					listItem1.appendChild(bookAuthor);
  					list.appendChild(listItem1);

  					bookItem.appendChild(list);
  					if (books[i].alreadyRead) {
    					bookItem.style.color = 'grey';
  					}

  					par.appendChild(bookItem);

  					bookList.appendChild(par);
				}			
				document.body.appendChild(bookList);
				
			}
		</script>
	</head>
	<body>
		<h1>My Book List</h1>
		<input type='button' value='Click!' onClick='nueva();'>
		<div></div>
	</body>
</html>